<template>
  <div>
  	<div class="wai">
  		<div class="two">
  			<div id="myChart3" :style="{width: '422px', height: '195px'}"></div>
  			<div class="test">
  				<div class="test-center">
					<div style="font-size: 16px;line-height: 24px;color: rgba(255,255,255,0.80);">高影响力事件</div>
					<div style="font-size: 20px;line-height: 24px;color: rgba(255,255,255,0.80);">56件</div>
				</div>
  			</div>
  		</div>
  	</div>
  </div>
</template>

<script>
export default {
    props: {
		
    },
    data() {
        return {
            
        }
    },
	mounted() {
		console.log(this.series);
		this.drawLine();
	},
    methods: {
        drawLine(){
        // 基于准备好的dom，初始化echarts实例
        	var chartDom = document.getElementById('myChart3');
            let myChart3 = this.$echarts.init(chartDom)
            // 绘制图表
            myChart3.setOption({
				color:['#ff9400','#f8ba00','#fae231','#fbd88d','#fef1a6'],
        		tooltip: {
        			trigger: 'item'
        		},
                series : [
                	{
                		name: '行业风险',
                		type: 'pie',
                		radius: ['75%', '85%'],
                		label: {
                			formatter:'{b}\n{d}'
                		},
                		itemStyle: {
                			borderColor: '#091344',
                			borderWidth: 3
                		},
                		data:[
                			{	
                				value:3, 
                				name:'影响力A3%',
                				label:{
                					color:'#ff9400'
                				}
                			},{	
                				value:5, 
                				name:'影响力B5%',
                				label:{
                					color:'#f8ba00'
                				}
                			},{	
                				value:12, 
                				name:'影响力CB12%',
                				label:{
                					color:'#fae231'
                				}
                			},{	
                				value:40, 
                				name:'影响力DB40%',
                				label:{
                					color:'#fbd88d'
                				}
                			},{	
                				value:33, 
                				name:'影响力EB33%',
                				label:{
                					color:'#fef1a6'
                				}
                			}
                		],
                		labelLine: {
                			show: true,
                			length: 15,
                			length2: 0
                		},
                	}
                ]
            });
        }
    }
}
</script>
<style scoped lang="scss">
	.wai{
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}
	
	.two{
		position: relative;
	}
	
	.test{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #ffffff;
		display: flex;
		align-items: center;
	}
	.test-center{
		width: 112px;
		position: relative;
	}
	
	.test-center div{
		position: relative;
	}
	
	.test-flex{
		display: flex;
		align-items: center;
	}
</style>
